<template>
  <div class="boos">
    <div class="but">
      <sButton :sButArr="sButArr" />
    </div>
    <div class="matters">
      <div class="todo">
        <todo :toDArr="toDArr"></todo>
      </div>
      <div class="hchart">
        <hcharta @chartHistoryAChoose="outdoorTempChoose">
          <span slot="header">历史温度</span>
        </hcharta>
        <hchartb :hdata="outdoorTempArr" :type1="type1" />
      </div>
    </div>
    <div class="humidness">
      <div class="echart">
        <hcharta @chartHistoryAChoose="environmentalHumChoose">
          <span slot="header">环境湿度</span>
        </hcharta>
        <echartb :edata="environmentalHumArr" :type2="type2" />
      </div>
      <div class="schart">
        <hcharta @chartHistoryAChoose="soilMoisChoose">
          <span slot="header">土壤湿度</span>
        </hcharta>
        <schartb :sdata="soilMoisArr" :type3="type3" />
      </div>
    </div>
    <div class="criticalData">
      <criticalt @statechange="statechange" @expor="expor"></criticalt>
      <criticalb :criticalArr="criticalArr"></criticalb>
    </div>
  </div>
</template>

<script type="text/javascript">
//api
import {
  sButApi,
  toDApi,
  outdoorTempApi,
  environmentalHumApi,
  soilMoisApi,
  criticalApi,
} from "../../api/homeApi";

//引入excl导出文件
import { export_json_to_excel } from "../../utils/Export2Excel";

//组件

import sButton from "./components/sButton";
import todo from "./components/toDo";
import hcharta from "./components/chartHistoryA";
import hchartb from "./components/chartHistoryB";
import echartb from "./components/chartEnvironmentB";
import schartb from "./components/chartSoilB";
import criticalt from "./components/criticalTop";
import criticalb from "./components/criticalBotton";

export default {
  data() {
    return {
      sButArr: [],
      toDArr: [],
      outdoorTempArr: [],
      environmentalHumArr: [],
      soilMoisArr: [],
      criticalArr: [],
      type1: 0,
      type2: 0,
      type3: 0,
    };
  },
  components: {
    sButton,
    todo,
    hcharta,
    hchartb,
    echartb,
    schartb,
    criticalt,
    criticalb,
  },
  mounted() {
    this.sBut();
    this.toD();
    this.outdoorTemp("");
    this.environmentalHum("");
    this.soilMois("");
    this.critical({ keyword: 0 });
  },
  methods: {
    outdoorTempChoose(val, type) {
      this.outdoorTemp(val);
      this.type1 = type;
    },
    environmentalHumChoose(val, type) {
      this.environmentalHum(val);
      this.type2 = type;
    },
    soilMoisChoose(val, type) {
      this.soilMois(val);
      this.type3 = type;
    },
    statechange(val) {
      this.critical(val);
    },

    sBut(val) {
      sButApi(val).then((res) => {
        //发送ajax请求
        if (res.code == 200) {
          this.sButArr = res.data;
        }
      });
    },
    toD(val) {
      toDApi(val).then((res) => {
        //发送ajax请求
        if (res.code == 200) {
          this.toDArr = res.data;
        }
      });
    },
    outdoorTemp(val) {
      outdoorTempApi(val).then((res) => {
        //发送ajax请求
        if (res.code == 200) {
          this.outdoorTempArr = res.data;
        }
      });
    },
    environmentalHum(val) {
      environmentalHumApi(val).then((res) => {
        //发送ajax请求
        if (res.code == 200) {
          this.environmentalHumArr = res.data;
        }
      });
    },
    soilMois(val) {
      soilMoisApi(val).then((res) => {
        //发送ajax请求
        if (res.code == 200) {
          this.soilMoisArr = res.data;
        }
      });
    },
    critical(val) {
      criticalApi(val).then((res) => {
        //发送ajax请求
        if (res.code == 200) {
          this.criticalArr = res.data;
        }
      });
    },

    formatJson(filterVal, jsonData) {
      var num = 0;
      return jsonData.map((v) => {
        num++;
        return filterVal.map((j) => {
          if (j == "id") {
            return num;
          }
          if (j == "state") {
            if (v[j] == 1) {
              return "正常";
            } else if (v[j] == 2) {
              return "处理中";
            } else if (v[j] == 3) {
              return "异常";
            }
          }
          return v[j];
        });
      });
    },
    expor() {
      const tHeader = [
        "序号",
        "大棚名称",
        "温度",
        "湿度",
        "光照强度",
        "土壤水分",
        "当前状态",
        "备注",
      ];
      const filterVal = [
        "id",
        "name",
        "temp",
        "humidity",
        "tdght",
        "moisture",
        "state",
        "note",
      ];
      const data = this.formatJson(filterVal, this.criticalArr);
      export_json_to_excel({
        header: tHeader, //excel头部列表
        data, //数据
        filename: "关键数据指标", //文件名称
        autoWidth: true, //自适应宽
        bookType: "xlsx", //文件类型
      });
    },
  },
};
</script>

<style lang="less" scoped>
.boos {
  padding: 24px;
  background-color: #e9f1f7;
  width: 1174px;
}
.matters {
  display: flex;
  justify-content: space-between;
  margin-bottom: 21px;
  .todo {
    width: 264px;
    margin-right: 24px;
  }
  .hchart {
    width: 840px;
    box-shadow: 0 0 10px 0 rgba(156, 158, 158, 0.5);
    border-radius: 8px;
  }
}
.humidness {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  .echart {
    width: 552px;
    margin-right: 24px;
    box-shadow: 0 0 10px 0 rgba(156, 158, 158, 0.5);
    border-radius: 8px;
  }
  .schart {
    width: 552px;
    box-shadow: 0 0 10px 0 rgba(156, 158, 158, 0.5);
    border-radius: 8px;
  }
}
.criticalData {
  width: 1128px;
  height: 366px;
  box-shadow: 0 0 10px 0 rgba(156, 158, 158, 0.5);
  border-radius: 8px;
  background-color: #ffffff;
}
</style>
